<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>   
<c:set var="ctx" value="${pageContext.request.contextPath }" ></c:set> 
<!doctype html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link rel="stylesheet" href="${ctx }/css/bootstrap.css" />
    <link href="${ctx }/assets/css/dashboard.css" rel="stylesheet" />
    
    <script type="text/javascript" src="${ctx }/js/jquery-1.11.1.js" ></script>
    <script type="text/javascript" src="${ctx }/js/bootstrap.js" ></script>
    <script type="text/javascript" src="${ctx }/js/bootstrapValidator.min.js" ></script>
    <script type="text/javascript">
    	$(function(){
    		//输入框的验证
    		$("#regForm").bootstrapValidator({
    			message:'输入无效',
    			feedbackIcons:{
    				valid:'glyphicon glyphicon-ok',
    				invalid:'glyphicon glyphicon-remove',
    				validating:'glyphicon glyphicon-refresh'
    			},
    			fields:{
    				loginName:{
    					validators:{
    						notEmpty:{
    							message:'不能为空'
    						},
    						regexp:{
    							regexp:/^[a-z0-9]{6,12}$/,
    							message:'请输入6-12位数字和字母组成的用户名'
    						},
    						threshold:6,
    						remote:{//ajax验证
    							url:'${ctx}/ic/toValidat',//验证地址
    							data:{
    								loginName:function(){
    									var ln = $('input[name="loginName"]').val();
    									return $.trim(ln);
    								}
    							},
    							message:'用户已存在',//错误时提示信息
    							type:'post',//请求方式
    							delay:2000
    							
    						}
    					}
    				},
    				email:{
    					validators:{
	    					notEmpty:{
	    							message:'不能为空'
	    					},
	    					emailAddress:{
	    						message:'请输入正确的邮箱地址'
	    					}
    					}
    				},
    				password:{
    					validators:{
	    					notEmpty:{
	    							message:'不能为空'
	    					},
	    					regexp:{
	    						regexp:/^[a-z0-9]{6}$/,
	    						message:'请输入6位数字和字母组成的密码'
	    					},
	    					different:{
	    						field:'loginName',
	    						message:'密码不能与登录名一致'
	    					}
    					}
    				},
    				comPwd:{
    					validators:{
	    					notEmpty:{
	    							message:'不能为空'
	    					},
	    					identical:{
	    						field:'password',
	    						message:'两次密码输入不一致'
	    					}
	    				}
    				}
    			}
    		});
    	});
    	
    	function userRegister(){
    		var f = $('#regForm');
    		f.bootstrapValidator('validate');
    		var b = f.data('bootstrapValidator').isValid();
    		if(b){
    			var data = f.serialize();
    			$.ajax({
    				type:'post',
    				url:'${ctx}/ic/userRegister',
    				data:data,
    				dataType:'json',
    				success:function(result){
    					alert(result.msg);
    					if(result.sus){
    						window.location.href='${ctx}/ic/login';
    					}
    				}
    			});
    		}
    	}
    	
    	
    	
    </script>
  </head>
  <body class="">
    <div class="page">
      <div class="page-single">
        <div class="container">
          <div class="row">
            <div class="col col-login mx-auto">
              <div class="text-center mb-6">
                <img src="${ctx }/img/logo/subway.svg" class="h-6" alt="">
                	<span style="font-size: 18px;font-weight: bold;">租赁中心注册界面</span>
              </div>
              <form class="card" action="" method="post" id="regForm">
                <div class="card-body p-6">
                  <div class="card-title">注册你的账号</div>
                  <div class="form-group">
                    <label class="form-label">登录名</label>
                    <input type="text" name="loginName" class="form-control" placeholder="登录名">
                  </div>
                  <div class="form-group">
                    <label class="form-label">Email</label>
                    <input type="text" name="email" class="form-control" placeholder="Email">
                  </div>
                  <div class="form-group">
                    <label class="form-label">密码</label>
                    <input type="password" name="password" class="form-control" placeholder="密码">
                  </div><div class="form-group">
                    <label class="form-label">确认密码</label>
                    <input type="password" name="comPwd" class="form-control" placeholder="再次输入密码">
                  </div>
                  <div class="form-group">
                    <label class="custom-control custom-checkbox">
                      <input type="checkbox" class="custom-control-input" />
                      <span class="custom-control-label">同意 <a href="terms.html">协议</a></span>
                    </label>
                  </div>
                  <div class="form-footer">
                    <button type="button" class="btn btn-primary btn-block" onclick="userRegister()">马上注册</button>
                  </div>
                </div>
              </form>
              <div class="text-center text-muted">
                	已经有账号? <a href="${ctx }/ic/login">去登录</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>